<template>
  <div id="first">
    <div class="el_content">
      <el-row>
        <el-col :span="12">
          <el-button type="primary" size="mini" plain class="btn-time">
            <i class="el-icon-arrow-left"></i>
            上一周
          </el-button>
          <el-button type="primary" size="mini" plain class="btn-time">
            下一周
            <i class="el-icon-arrow-right"></i>
          </el-button>
          <el-button type="primary" size="mini" @click="$router.push({name:'bespokeEdit'})">今天</el-button>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-select v-model="search" size="mini" class="el_long" @change="changeType">
            <el-option :label="'预约总计'" :value="1"></el-option>
            <el-option :label="'孙轻骑'" :value="2"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <div class="box el_t_20">
        <div class="box-tr">
          <table>
            <tr>
              <template v-for="(item,index) in header">
                <th :class="{active:item.active}">
                  <p v-html="item.week"></p>
                  <span v-html="item.date"></span>
                </th>
              </template>
            </tr>
            <tr>
              <template v-for="(item,index) in header">
                <td class="border" :class="{active:item.active}" v-html="item.label"></td>
              </template>
            </tr>
            <template v-for="(item,index) in search===1?list:list2">
              <tr :class="{border:index===2||index===7}">
                <td v-html="item.time"></td>
                <template v-for="(itm,idx) in item.list">
                  <td class="item" :class="{active:itm.active}" @click="showData(itm)">
                    <template v-if="search===1">
                      <span v-html="itm.no1===0?'&nbsp;':itm.no1"></span>
                      <em>{{itm.no2===0?'&nbsp;':`(${itm.no2})`}}</em>
                    </template>
                    <template v-else-if="itm.info && itm.info.length > 0" v-for="(m,i) in itm.info">
                      <div class="info" :class="{gray:m.type===1,red:m.type===3,green:m.type===4}">
                        <h2 v-html="`${m.name}  ${m.sex}`"></h2>
                        <h3 v-html="m.phone"></h3>
                      </div>
                    </template>
                  </td>
                </template>
              </tr>
            </template>
          </table>
        </div>
      </div>
    </div>
    <el-dialog title="预约信息" :visible.sync="modal" width="60%" :before-close="closed">
      <el-table :data="dataList" stripe height="360">
        <el-table-column label="姓名" prop="name" width="100"></el-table-column>
        <el-table-column label="电话" prop="phone" width="120"></el-table-column>
        <el-table-column label="预约医生" prop="name" width="120"></el-table-column>
        <el-table-column label="备注" prop="remark" min-width="150">
          <template slot-scope="data">
            <p class="hidden" v-html="data.row.remark"></p>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "first",
  data() {
    return {
      modal: false,
      search: 1,
      header: [
        { week: "", date: "", label: "预约", active: false },
        {
          week: "周一",
          date: "2018.11.19",
          label: "上午0/下午0",
          active: false
        },
        {
          week: "周二",
          date: "2018.11.20",
          label: "上午0/下午0",
          active: false
        },
        {
          week: "周三",
          date: "2018.11.21",
          label: "上午0/下午0",
          active: false
        },
        {
          week: "周四",
          date: "2018.11.22",
          label: "上午0/下午0",
          active: false
        },
        {
          week: "周五",
          date: "2018.11.23",
          label: "上午0/下午0",
          active: true
        },
        {
          week: "周六",
          date: "2018.11.24",
          label: "上午0/下午0",
          active: false
        },
        {
          week: "周日",
          date: "2018.11.25",
          label: "上午0/下午0",
          active: false
        }
      ],
      list: [
        {
          time: "09:00-10:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: false },
            { no1: 1, no2: 1, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 2, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: false }
          ]
        },
        {
          time: "10:00-11:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 2, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: true },
            { no1: 1, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "11:00-12:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: false },
            { no1: 3, no2: 1, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 1, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "13:00-14:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "14:00-15:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 2, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "15:00-16:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: false },
            { no1: 3, no2: 0, active: false },
            { no1: 1, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "16:00-17:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 1, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "17:00-18:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 1, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "19:00-20:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 1, no2: 0, active: false }
          ]
        }
      ],
      list2: [
        {
          time: "09:00-10:00",
          list: [
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 1 }
              ]
            },
            {
              no1: 1,
              no2: 1,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 1 }
              ]
            },
            { no1: 0, no2: 0, active: false },
            {
              no1: 2,
              no2: 0,
              active: true,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 1 }
              ]
            },
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 2 }
              ]
            }
          ]
        },
        {
          time: "10:00-11:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 2, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: true,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 1 }
              ]
            },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 2 }
              ]
            },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "11:00-12:00",
          list: [
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [{ name: "王先生", sex: "男", phone: "18516124212" }]
            },
            {
              no1: 3,
              no2: 1,
              active: false,
              info: [{ name: "王先生", sex: "男", phone: "18516124212" }]
            },
            { no1: 0, no2: 0, active: false },
            {
              no1: 0,
              no2: 0,
              active: true,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 3 }
              ]
            },
            { no1: 1, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "13:00-14:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 3 },
                { name: "王先生", sex: "男", phone: "18516124212", type: 2 }
              ]
            },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "14:00-15:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            {
              no1: 2,
              no2: 0,
              active: true,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 1 }
              ]
            },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "15:00-16:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [{ name: "王先生", sex: "男", phone: "18516124212" }]
            },
            {
              no1: 3,
              no2: 0,
              active: false,
              info: [{ name: "王先生", sex: "男", phone: "18516124212" }]
            },
            {
              no1: 1,
              no2: 0,
              active: true,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 4 }
              ]
            },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "16:00-17:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 2 }
              ]
            },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "17:00-18:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 1,
              active: false,
              info: [{ name: "王先生", sex: "男", phone: "18516124212" }]
            },
            { no1: 0, no2: 0, active: false },
            {
              no1: 0,
              no2: 0,
              active: true,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 4 }
              ]
            },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false }
          ]
        },
        {
          time: "19:00-20:00",
          list: [
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: false },
            { no1: 0, no2: 0, active: true },
            { no1: 0, no2: 0, active: false },
            {
              no1: 1,
              no2: 0,
              active: false,
              info: [
                { name: "王先生", sex: "男", phone: "18516124212", type: 2 }
              ]
            }
          ]
        }
      ],
      dataList: [
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍"
        },
        {
          name: "胡忠信",
          sex: "男",
          birthday: "1956-12-10",
          no: "1812100102",
          phone: "15645541321",
          time: "2018-12-10 14:23:32",
          remark: "睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍睡眠障碍"
        }
      ]
    };
  },
  methods: {
    changeType(type) {
      if (type === 2) {
      }
    },
    closed() {
      this.modal = false;
    },
    showData(data) {
      if (this.search === 1) this.modal = data.no1 !== 0;
      else this.$router.push({ name: "bespokeEdit" });
    }
  }
};
</script>
<style scoped>
.el_content {
  width: 100%;
  height: calc(100vh - 143px);
  background: #ffffff;
  padding: 20px;
}
p {
  margin: 0;
}
.box {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.btn-time {
  margin-left: 0 !important;
}

.box-tr table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
  border: 1px solid rgba(242, 242, 242, 1);
  font-size: 14px;
}
table tr td:first-child {
  width: 5em;
  padding: 1em;
}

table td,
table th {
  padding: 10px;
  font-size: 14px;
  color: #333;
  border: 1px solid rgba(242, 242, 242, 1);
}

table th {
  text-align: left;
  background: rgba(242, 242, 242, 1);
}
th span {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}
.border,
.border td {
  border-bottom-width: 10px;
}

td.item {
  text-align: center;
}
td.item > span {
  color: #333;
}
td.item > em {
  font-style: normal;
  color: #ff0000;
  font-size: 12px;
}
th.active,
td.active {
  color: #006835;
}
td.active {
  background: rgba(242, 242, 242, 0.5);
}

.info h2,
.info h3 {
  font-size: 14px;
  color: #333;
  margin: 0;
  font-weight: normal;
  text-align: left;
}
.info {
  margin-bottom: 10px;
}
td .info:last-child {
  margin-bottom: 0;
}
.info.gray h2,
.info.gray h3 {
  color: #999;
}
.info.green h2,
.info.green h3 {
  color: #006835;
}
.info.red h2,
.info.red h3 {
  color: #ff0000;
}
</style>